<template>
    <div id="bigbox">
        <!-- 上面的盒子 -->
        <div id="topbox">
            <input id="inp1" type="text" placeholder="请输入账号"></input>
            <input id="inp2" type="text" placeholder="请输入商家名称"></input>
            <el-button @click="sousuo" :icon="Search" circle />
        </div>
        <!-- 中间的内容 -->
        <div id="middlebox">
            <table>
                <tr>
                    <th>商品名称</th>
                    <th>商家名称</th>
                    <th>商品被收藏人数</th>
                    <th>商家被收藏人数</th>
                </tr>
                <template v-for="item in asd">
                    <tr>
                        <td>{{item.goodsName}}</td>
                        <td>{{item.shopName}}</td>
                        <td>{{item.goodsCollects}}</td>
                        <td>{{item.shopCollects}}</td>
                    </tr>
                </template>
                <div class="foot">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageSize"
                        :page-count="total"
                        @current-change="pageChange"/>
                </div>
            </table>
        </div>
    </div>
</template>
<style scoped>
     #bigbox{
        width:100%;
        height:100%;
        background-color: #F5F5F5;
    }
    #topbox{
        width:90%;
        height:80px;
        margin-left:5%;
        line-height:80px;
    }
    #inp1{
        height:30px;
        width:15%;
        margin-right:1%;
        padding-left:1%;
        border-radius: 5px;
        border:0px;
        box-shadow: 1px 3px #ccc;
        outline: none;
    }
    #inp2{
        height:30px;
        width:15%;
        margin-right:1%;
        padding-left:1%;
        border-radius: 5px;
        border:0px;
        box-shadow: 1px 3px #ccc;
        outline: none;
    }
    .el-button.is-circle {
        border-radius: 25%;
        padding: 8px;
        width: 32px;
        position: relative;
    }
    .el-button{
        background-color: #5981E2;
        color: #fff;
        font-size:20px;
    }
    table{
        width:100%;
    }
    th,td{
        padding-top:2%;
        width:25%;
        text-align: center;
    }
    #middlebox{
        width:90%;
        height:483px;
        margin-left:5%;
        background-color: #fff;
    }
    .foot{
        width: 75%;
        height: 10%;
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 41px;
    }
    .el-pagination{
        justify-content: center;
    }
</style>
<script setup>
    import {Search} from '@element-plus/icons-vue'
    import axios from 'axios';
    import {ref,onMounted} from 'vue';
    let pageSize = 7;
    let currentPage = ref(1);
    let total = ref(1);
    var asd=ref([]);
    const pageChange = (newPage) => {
        currentPage.value = newPage;
        shoucang();
    };
    onMounted(()=>{
        shoucang();
    })
    function shoucang(){
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/collects/collectsList`,
        {
            pageIndex:currentPage.value,
            pageSize:pageSize,
        })
        .then(function(res){
            var qwe=res.data.data.collectsList;
            console.log(qwe);
            total=res.data.data.pageCount;
            asd.value=qwe;
            console.log(asd.value);
            
        })
    }
    function sousuo(){
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post("http://192.168.199.11:8001/ShoppingStreet/collects/searchCollect",
        {
            pageIndex:currentPage.value,
            pageSize:pageSize,
            shopName:inp2.value,
            account:inp1.value,
        })
        .then(function(res){
            var rqw=res.data.data.searchList;
            asd.value=rqw;
            total=res.data.data.pageCount;
        })
    }
</script>